import { useState } from "react";
import styles from "../data/posters.module.css";

// 导入图片
import img1 from "../data/images/add1.jpg";
import img2 from "../data/images/add2.jpg";
import img3 from "../data/images/add3.jpg";
import img4 from "../data/images/add4.jpg";

// 数据类型定义
interface Festival {
  id: string;
  name: string;
  isHot: boolean;
  templates: Template[];
}

interface Template {
  type: string;
  count: number;
  imageUrl: string;
}

// 模拟数据
const festivals: Festival[] = [
  {
    id: "dragon",
    name: "年中大促",
    isHot: true,
    templates: [
      {
        type: "618电商首页",
        count: 238,
        imageUrl: img1,
      },
      {
        type: "618电商直播间",
        count: 169,
        imageUrl: img2,
      },
      {
        type: "618电商主图",
        count: 261,
        imageUrl: img3,
      },
      {
        type: "618电商海报",
        count: 261,
        imageUrl: img4,
      },
    ],
  },
  {
    id: "children",
    name: "精选推荐",
    isHot: true,
    templates: [
      {
        type: "夏日电商促销模板",
        count: 165,
        imageUrl: img3,
      },
      {
        type: "520礼遇季电商模板",
        count: 246,
        imageUrl: img4,
      },
      {
        type: "端午节电商模板",
        count: 427,
        imageUrl: img2,
      },
      {
        type: "六一儿童节电商模板",
        count: 100,
        imageUrl: img1,
      },
    ],
  },
  {
    id: "summer",
    name: "直播间",
    isHot: false,
    templates: [
      {
        type: "美妆护肤电商直播间",
        count: 105,
        imageUrl: img2,
      },
      {
        type: "餐饮美食电商直播间",
        count: 70,
        imageUrl: img3,
      },
      {
        type: "数码家电电商直播间",
        count: 80,
        imageUrl: img4,
      },
      {
        type: "服饰箱包电商直播间",
        count: 215,
        imageUrl: img1,
      }
    ],
  },
  {
    id: "grain",
    name: "电商首页",
    isHot: false,
    templates: [
      {
        type: "美妆护肤类电商首页",
        count: 216,
        imageUrl: img1,
      },
      {
        type: "食品类电商首页",
        count: 123,
        imageUrl: img2,
      },
      {
        type: "潮电类电商首页",
        count: 110,
        imageUrl: img3,
      },
      {
        type: "母婴亲子类电商首页",
        count: 113,
        imageUrl: img4,
      }
    ],
  },
  {
    id: "eye",
    name: "商品主图",
    isHot: false,
    templates: [
      {
        type: "电商通用主图",
        count: 199,
        imageUrl: img3,
      },
      {
        type: "美妆护肤类电商主图",
        count: 160,
        imageUrl: img1,
      },
      {
        type: "食品类电商主图",
        count: 120,
        imageUrl: img2,
      },
      {
        type: "潮电类电商主图",
        count: 160,
        imageUrl: img4,
      }
    ],
  },
  {
    id: "gaokao",
    name: "促销海报",
    isHot: true,
    templates: [
      {
        type: "电商通用海报",
        count: 197,
        imageUrl: img2,
      },
      {
        type: "电商直播海报",
        count: 100,
        imageUrl: img3,
      },
      {
        type: "美妆护肤类电商海报",
        count: 215,
        imageUrl: img1,
      },
      {
        type: "潮电类电商海报",
        count: 180,
        imageUrl: img4,
      }
    ],
  },
  {
    id: "yiliao",
    name: "综合模板",
    isHot: true,
    templates: [
      {
        type: "电商商品详情页",
        count: 237,
        imageUrl: img4,
      },
      {
        type: "电商促销标签",
        count: 202,
        imageUrl: img1,
      },
      {
        type: "电商优惠劵",
        count: 202,
        imageUrl: img2,
      },
      {
        type: "电商弹窗挂件",
        count: 201,
        imageUrl: img3,
      },
    ],
  },
];
export default function Posters() {
  const [selectedFestival, setSelectedFestival] = useState<Festival>(
    festivals[0]
  );
  const [lockSelection, setLockSelection] = useState(false);
  const handleHover = (festival: Festival) => {
    if (!lockSelection) {
      setSelectedFestival(festival);
    }
  };
  // 点击事件处理函数
  const handleClick = (festival: Festival) => {
    // 设置选中的节日
    setSelectedFestival(festival);
    // 锁定选择
    setLockSelection(true);
  };

  return (
    <div className={styles.container}>
      <div className={styles.headerRow}>
        <h2 className={styles.sectionTitle}>行业趋势-电商篇</h2>
        <p className={styles.sectionDesc}>精选热点专题实时更新,热门素材轻松get~</p>
        <div className={styles.festivalList}>
          {festivals.map((festival) => (
            <div
              key={festival.id}
              className={`${styles.festivalItem} ${selectedFestival.id === festival.id ? styles.active : ""
                }`}
              onMouseEnter={() => handleHover(festival)}
              onMouseLeave={() => setLockSelection(false)}
              onClick={() => handleClick(festival)}
            >
              <div className={styles.festivalLeft}>
                <span className={styles.festivalName}>{festival.name}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className={styles.templateGallery}>
        {selectedFestival.templates.map((template) => (
          <div key={template.type} className={styles.templateCard}>
            <div className={styles.templateContent}>
              <div className={styles.templateImageContainer}>
                <img
                  src={template.imageUrl}
                  alt={template.type}
                  className={styles.templateImage}
                />
              </div>
              <div className={styles.templateInfo}>
                <h4>{template.type}</h4>
                <span>共{template.count}个作品</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}